<template>  
    <div>  
      <button @click="toggleReview" class="assessmentButton">查看评价</button>  
      <transition name="fade">  
        <div v-if="showReviewInput" id="reviewInput">  
          <textarea   
            style="font-size: 18px; overflow-y: auto;"  
            rows="4"  
            cols="70"  
            :placeholder=predefinedReview
            readonly  
          ></textarea>  
        </div>  
      </transition>  
    </div>  
  </template>  
    
  <script>  
  export default {  
    name: 'RulerCommend',  
    data() {  
      return {   
        showReviewInput: false,  
        predefinedReview: '这是一个预定义的评价', // 预定义的评价文本  
      };  
    },  
    methods: {  
      toggleReview() {  
        this.predefinedReview=this.showCommend();
        this.showReviewInput = !this.showReviewInput;  
      },  
      showCommend(){
        return this.$parent.getCommend();
      }
    },  
  };  
  </script>
    
    <style scoped>
  .assessmentButton {
    height: 40px;
    text-align: center;
    padding: 7px;
    border-radius: 23px;
    border:1px solid #a6c1ee;
    font-weight: 700;
    font-size: 17px;
    margin: 0 auto;
    width: 100px;
    background-image: linear-gradient(to right, #a6c1ee, rgb(251, 194, 235));
    color: #fff;
    position: relative;
    left:550px;
    top:150px;
  }
  /* 样式可以根据需要进行调整 */
  #reviewInput {
    margin-top: 0px;
    padding: 8px;
  }
  
  #reviewInput textarea {
    margin-bottom: 10px;
  }
  
  #reviewInput button {
      height: 40px;
    text-align: center;
    padding: 7px;
    border-radius: 23px;
    border:1px solid #a6c1ee;
    font-weight: 700;
    font-size: 17px;
    width: 80px;
    background-image: linear-gradient(to right, #a6c1ee, rgb(251, 194, 235));
    color: #fff;
    position: relative;
    top:30px;
    left:-100px;
  }
  
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s;
  }
  
  .fade-enter,
  .fade-leave-to {
    opacity: 0;
  }
  </style>